<template>
	<view class="container">
		<uni-nav-bar @clickLeft="back" leftIcon="back" :fixed="true" status-bar="true" title="商户入驻"></uni-nav-bar>
		<view class="step">
			<uni-steps class="stepPro" :options="stepData" active-color="#57BE6A" :active="active" />
			<view class="status" v-if="data.step == 1">
				<radio-group class="radioGroup" @change="radioChange1">
					<label class="radio">
						<radio color="#57BE6A" value="1" :checked="type1" />企业自营</label>
					<label class="radio">
						<radio color="#57BE6A" value="2" :checked="type2" />社区直营</label>
				</radio-group>
				<checkbox-group class="radioGroup mtop-50" @change="checkChange">
					<label>
						<checkbox value="1" :checked="is_open_offline" />线下门店
					</label>
					<label>
						<checkbox value="2" :checked="is_open_online" />线上商城
					</label>
				</checkbox-group>
				<radio-group class="jifenGroup mtop-50" @change="radioChange3" v-if="is_open_offline">
					<label class="radio">
						<radio color="#57BE6A" value="1" :checked="type3" />分润模式</label>
					<label class="radio">
						<radio color="#57BE6A" value="2" :checked="type4" />分享模式</label>
				</radio-group>
				<view class="mark" @tap="markTips(0)">
					<image src="/static/images/center/icon/5.png" mode=""></image>
				</view>
				<view class="mark1" @tap="markTips(12)" v-if="is_open_offline">
					<image src="/static/images/center/icon/5.png" mode=""></image>
				</view>
			</view>
			<view class="status" v-if="data.step == 4">
				<radio-group class="radioGroup" @change="radioChange2">
					<label class="radio">
						<radio color="#57BE6A" value="1" :checked="bankType1" />我是个体</label>
					<label class="radio">
						<radio color="#57BE6A" value="2" :checked="bankType2" />我是企业</label>
				</radio-group>
			</view>
		</view>
		<view class="cut"></view>
		<view class="step1" v-if="data.step == 1">
			<form>
				<view class="uni-form-item uni-column" v-show="is_open_offline">
					<view class="title bold">线下商户</view>
					<view class="title">线下商户名称
						<image @tap.stop="markTips(1)" class="mark-img" src="/static/images/center/icon/5.png" mode=""></image>
					</view>
					<!-- <view class="mark"> -->

					<!-- </view> -->
					<input class="uni-input" v-model="data.seller_name" placeholder="请输入店铺名称" />
				</view>
				<view class="uni-form-item uni-column" @tap="cateId" v-show="is_open_offline">
					<view class="title">经营品类
						<image @tap.stop="markTips(4)" class="mark-img" src="/static/images/center/icon/5.png" mode=""></image>
					</view>
					<input class="uni-input" v-model="catename" disabled="true" placeholder="请选择经营品类" />
					<text class="cell-more yticon icon-you"></text>
				</view>
				<view class="uni-form-item uni-column" v-show="is_open_offline">
					<view class="title">线下服务电话
						<image @tap="markTips(5)" class="mark-img" src="/static/images/center/icon/5.png" mode=""></image>
					</view>
					<input type="number" class="uni-input" v-model="data.phone" placeholder="请输入线下商户服务电话" />
				</view>
				<view class="uni-form-item uni-column" v-show="is_open_offline">
					<view class="title">营业时间</view>
					<view class="timeBox">
						<input @tap="time1" class="uni-input time" disabled="true" placeholder="请选开始时间" v-model="timeG.time1" />
						<text>—</text>
						<input @tap="time2" class="uni-input time" disabled="true" placeholder="请选结束时间" v-model="timeG.time2" />
					</view>
				</view>
				<view class="uni-form-item uni-column" v-show="is_open_offline&&data.shop_commission_retrun_mode == 1">
					<view class="title">最低优惠力度（给消费者）
						<image @tap="markTips(8)" class="mark-img" src="/static/images/center/icon/5.png" mode=""></image>
					</view>

					<input class="uni-input" type="digit" placeholder="请输入优惠比例" v-model="data.rebate_proportion" />
					<text class="cell-more-per" style="color: #333;">%</text>
					<text class="label">企业自营优惠比例不低于{{company_sign_ratio}}%，社区直营优惠比例不低于{{community_ratio_limit}}%</text>
				</view>
				<view class="uni-form-item uni-column" v-show="is_open_offline">
					<view class="title bold">商户LOGO</view>
					<image class="image logo" :src="urls[0]" @click="clk(0)"></image>
					<text class="example-r" @tap="preViewExam(0)">查看示例</text>
				</view>
				<view class="uni-form-item uni-column" v-show="is_open_offline">
					<view class="title bold">门店主图</view>
					<image class="image logo" :src="urls[1]" @click="clk(1)"></image>
					<text class="example-r" @tap="preViewExam(1)">查看示例</text>
				</view>
				<view class="uni-form-item uni-column" v-show="is_open_offline">
					<view class="title bold">门店图片</view>
					<block v-for="(item,index) in data.detail_image" :key="index">
						<image class="image detailImg" :src="item" mode="aspectFit" @tap="upload_img(1,index)"></image>
					</block>
					<view v-if="data.detail_image.length < 3" class="image detailImg" @tap="upload_img(1)"></view>
					<text class="example-b" @tap="preViewExam(2)">查看示例</text>
				</view>
				<view class="cut" style="margin-top: 50rpx; margin-left: -60rpx;" v-show="is_open_offline"></view>
				<view class="uni-form-item uni-column" v-show="is_open_online">
					<view class="title bold">线上商户</view>
					<view class="title">线上商户名称</view>
					<input class="uni-input" v-model="data.online_name" placeholder="请输入商户名称" />
				</view>
				<view class="uni-form-item uni-column" v-show="is_open_online">
					<view class="title">线上服务电话
						<image @tap="markTips(6)" class="mark-img" src="/static/images/center/icon/5.png" mode=""></image>
					</view>
					<input type="number" class="uni-input" v-model="data.online_phone" placeholder="请输入线上商户服务电话" />
				</view>
				<view class="uni-form-item uni-column" v-show="is_open_online">
					<view class="title">退货收货人
						<image @tap="markTips(9)" class="mark-img" src="/static/images/center/icon/5.png" mode=""></image>
					</view>
					<input type="text" class="uni-input" v-model="data.receive_name" placeholder="请输入退货收货人姓名" />
				</view>
				<view class="uni-form-item uni-column" v-show="is_open_online">
					<view class="title">退货收货人电话
						<image @tap="markTips(10)" class="mark-img" src="/static/images/center/icon/5.png" mode=""></image>
					</view>
					<input type="number" class="uni-input" v-model="data.receive_phone" placeholder="请输入退货收货人电话" />
				</view>
				<view class="uni-form-item uni-column" v-show="is_open_online">
					<view class="title">退货收货地址
						<image @tap="markTips(11)" class="mark-img" src="/static/images/center/icon/5.png" mode=""></image>
					</view>
					<input type="text" class="uni-input" v-model="data.receive_address" placeholder="请输入退货收货地址" />
				</view>
				<view class="uni-form-item uni-column" v-show="is_open_online">
					<view class="title bold">线上店招</view>
					<image class="image logo" :src="urls[2]" @click="clk(2)"></image>
				</view>
				<view class="cut" v-show="is_open_online" style="margin-top: 50rpx; margin-left: -60rpx;"></view>
				<view class="uni-form-item uni-column" @tap="storeLocation">
					<view class="title">商户位置
						<image @tap.stop="markTips(2)" class="mark-img" src="/static/images/center/icon/5.png" mode=""></image>
					</view>
					<input class="uni-input" disabled="true" v-model="addressG.address1" placeholder="请选择商户位置" />
					<text class="cell-more yticon icon-you"></text>
				</view>
				<view class="uni-form-item uni-column">
					<view class="title">商户详细地址
						<image @tap="markTips(3)" class="mark-img" src="/static/images/center/icon/5.png" mode=""></image>
					</view>
					<input class="uni-input" v-model="addressG.address2" placeholder="请输入详细地址" />
				</view>
				<view class="uni-form-item uni-column">
					<view class="title">社会统一信用代码
						<image @tap="markTips(7)" class="mark-img" src="/static/images/center/icon/5.png" mode=""></image>
					</view>
					<input class="uni-input" placeholder="请输入社会统一信用代码" v-model="data.unified_credit_code" />
				</view>
				<view class="uni-form-item uni-column">
					<view class=" bold">营业执照</view>
					<image class="image licenseImg" :src="data.business_license" mode="aspectFit" @tap="upload_img(2,0)"></image>
					<text class="example-b" @tap="preViewExam(3)">查看示例</text>
				</view>
				<view class="uni-form-item uni-column">
					<view class="bold">特殊资质</view>
					<block v-for="(item,index) in data.quarantine_report" :key="index">
						<image class="image licenseImg" :src="item" mode="aspectFit" @tap="upload_img(3,index)"></image>
					</block>
					<view class="image licenseImg" @tap="upload_img(3)"></view>
					<text class="example-b" @tap="preViewExam(4)">查看示例</text>
				</view>
			</form>
		</view>
		<view class="step2" v-if="data.step == 2">
			<view class="name">
				<text>手机号码</text>
				<input type="number" v-model="data.personal_phone" :disabled="phoneCheck" placeholder="请填写手机号码" />
			</view>
			<view class="idcard" style="margin-bottom: 60rpx;">
				<text>验证码</text>
				<input type="number" v-model="data.verify_code" placeholder="请填写验证码" />
				<text class="veri" :class="!isCheck ? 'yzmactive' : ''" @tap="isCheck && yzm()">获取验证码</text>
				<text class="ver" v-show="!isCheck">{{ time }}秒后可再次获取</text>
			</view>
		</view>
		<view class="step3" v-if="data.step == 3">
			<view class="name">
				<text>姓名</text>
				<input type="text" placeholder="请填写姓名" :disabled="nameCheck" v-model="data.real_name" @input="onInput" @blur="onBlur" />
			</view>
			<view class="num">
				<text>身份证号码</text>
				<input type="text" placeholder="请填写身份证号码" :disabled="cardCheck" maxlength="18" v-model="data.card_id" @input="onInputId"
				 @blur="onBlurId" />
			</view>
			<view class="uni-form-item uni-column">
				<view class="title bold">身份证正面</view>
				<image class="image detailImg" :src="data.card_front" mode="" @tap="upload_img(4)"></image>
			</view>
			<view class="uni-form-item uni-column">
				<view class="title bold">身份证反面</view>
				<image class="image detailImg" :src="data.card_back" mode="" @tap="upload_img(5)"></image>
			</view>
		</view>
		<view class="step4" v-if="data.step == 4">
			<view class="cell" v-if="data.bank_type == 2">
				<text>单位名称</text>
				<input type="text" placeholder="请填写单位名称" v-model="data.cardholder_name" />
			</view>
			<view class="cell" v-if="data.bank_type == 1">
				<text>姓名</text>
				<input type="text" disabled="ture" placeholder="请填写姓名" v-model="data.real_name" />
			</view>
			<view class="cell" v-if="data.bank_type == 1">
				<text>身份证号码</text>
				<input type="idcard" disabled="ture" placeholder="请填写身份证号码" v-model="data.card_id" />
			</view>
			<view class="cell">
				<text>开户银行名称</text>
				<input type="text" disabled="ture" placeholder="请选择开户银行名称" v-model="data.bank_name" @tap="selectBank" />
			</view>
			<view class="cell">
				<text>银行卡账号</text>
				<input type="number" placeholder="请填写银行卡账号" v-model="data.bank_card_number" />
			</view>
		</view>
		<view class="step5" v-if="data.step == 5">
			<image src="../../../static/images/center/iconGou.png" mode=""></image>
			<view class="a">资料提交成功，请等待审核</view>
			<view class="b">预计需要1-2天，如需加急处理请联系客服</view>
		</view>
		<view class="uni-btn-v" v-if="data.step == 5">

			<view class="btn">
				<button v-show="1 == 2"></button>
				<button @tap="finish">完成</button>
			</view>
		</view>
		<view class="uni-btn-v" v-else>
			<view class="rule" v-if="data.step == 1">
				<image @tap="ruleCheck" v-if="ruleChecked" src="../../../static/images/public/select.png" mode=""></image>
				<view @tap="ruleCheck" class="gray" v-else></view>
				<view class="text"><text>同意</text><text @tap="goRule(13,'普惠社区商户入驻协议')">《国家普惠社区商户入驻协议》</text></view>
			</view>
			<view class="btn">
				<button @tap="last" v-show="data.step!=1">返回上一步</button>
				<button @tap="btnClick&&submit()">下一步</button>
			</view>

		</view>
		<category @select="select" @back="cateback" :show="categoryShow"></category>
		<!-- 图片剪切 -->
		<avatar @upload="myUpload" ref="avatar"></avatar>
		<w-picker value="00:00:00" mode="time" @confirm="onConfirm1($event)" ref="time1"></w-picker>
		<w-picker value="00:00:00" mode="time" @confirm="onConfirm2($event)" ref="time2"></w-picker>
		<view class="mark-tips-model" v-show="markTipsModel">
			<view :class="showType == 0||showType == 12 ? 'box' : 'box-type'">
				<image class="back" src="https://inclusivecommunity.oss-cn-chengdu.aliyuncs.com/attach/2020-08/c0fa520200821113311780.png"
				 mode=""></image>
				<text>说明</text>
				<view class="mark-con">
					<image class="bell" src="https://puhuishequ.oss-cn-beijing.aliyuncs.com/attach/2020-07/f10c1202007061012119827.png"
					 mode=""></image>
					<view class="mark">
						<block v-if="showType==0">
							<block v-for="(item,index) in markText" :key="index">
								<view class="title">{{item.title}}</view>
								<view class="explan">{{item.con}}</view>
							</block>
						</block>
						<block v-else-if="showType==1">填店铺名称，勿填公司全称</block>
						<block v-else-if="showType==2">地图定位，范围需精准到社区街道名称</block>
						<block v-else-if="showType==3">文字填写精确地址，需准确到店铺门牌号</block>
						<block v-else-if="showType==4">需要选择与实际销售经营产品一致的类别，如无法确定类别，先选择其它</block>
						<block v-else-if="showType==5">需要填写店铺管理员联系方式，不一定是法人信息</block>
						<block v-else-if="showType==6">需要填写店铺管理员联系方式，不一定是法人信息</block>
						<block v-else-if="showType==7">需要填写企业营业执照编码</block>
						<block v-else-if="showType==8">例如：商户优惠比例为 5%。消费者实际消 费支付 100 元，商家实际获得收入 95 元，优惠的 5 元将以贝壳的形式赠送部分到用户账户。</block>
						<block v-else-if="showType==9">用户退货需填写收货人,请正确填写</block>
						<block v-else-if="showType==10">用户退货需填写收货人电话,请正确填写</block>
						<block v-else-if="showType==11">用户退货需填写收货地址,请正确填写</block>
						<block v-else-if="showType==12">
							<rich-text :nodes="markTips12"></rich-text>
						</block>
					</view>
				</view>
				<view class="mark-btn" @tap.stop="markTipsModel = !markTipsModel">我知道了</view>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		wechatAuth
	} from '@/api/public.js'
	import {
		registerVerify
	} from "@/api/user.js";
	import {
		baseUrl
	} from "@/api/api.js"
	import {
		getsellerclass,
		merchantEntry,
		sellerIndex
	} from "@/api/merchant.js"
	import {
		systemConfig,
		protocolDetail,
		location
	} from '@/api/public.js'
	import utils from "@/common/utils.js"

	import wPicker from "@/components/w-picker/w-picker.vue"
	import avatar from "@/components/yq-avatar/yq-avatar.vue"
	import uniSteps from '@/components/uni-steps/uni-steps.vue'
	import category from "@/components/category/category.vue"
	export default {
		components: {
			wPicker,
			uniSteps,
			category,
			avatar
		},
		data() {
			return {
				markTips12: "",
				btnClick: true,
				urls: ["", "", ""],
				type1: true,
				type2: false,
				type3: true,
				type4: false,
				ruleChecked: false,
				phoneCheck: false,
				nameCheck: false,
				cardCheck: false,
				time: 60,
				isCheck: true,
				active: 0,
				categoryShow: false,
				stepData: [{
					title: '提交资质',
				}, {
					title: '绑定手机号',
				}, {
					title: '实名认证',
				}, {
					title: '绑定银行卡',
				}, {
					title: '等待审核',
				}],
				baseUrl: "",
				imgType: null,
				url: "",
				maxWidth: null,
				maxHeight: null,
				current: 0,
				addressG: {
					address1: null,
					address2: null,
				},
				timeG: {
					time1: null,
					time2: null,
				},
				cateList: [],
				catename: "",
				data: {
					online_logo: null,
					online_name: null,
					online_phone: null,
					bank_type: "1",
					bank_card_number: null,
					bank_name: null,
					bank_real_name: null,
					real_name: null,
					card_id: null,
					verify_code: "",
					personal_phone: "",
					rebate_proportion: null,
					seller_name: null,
					cate_id: null,
					logo: null,
					phone: null,
					image: null,
					detail_image: [],
					quarantine_report: [],
					business_license: null,
					unified_credit_code: null,
					seller_type: "1",
					longitude: null,
					latitude: null,
					province: null,
					city: null,
					area: null,
					address: null,
					business_hours: null,
					is_new: 1,
					step: 1,
					promoter_uid: null,
					is_promoter: 0,
					dealer_uid: null,
					is_dealer: 0,
					card_front: null,
					card_back: null,
					cardholder_name: null,
					shop_commission_retrun_mode: 1
				},
				is_open_online: false,
				is_open_offline: true,
				bankType1: true,
				bankType2: false,
				exampleImage: [
					'https://inclusivecommunity.oss-cn-chengdu.aliyuncs.com/attach/2020-07/ffd2c202007241702482961.png', //logo
					'https://inclusivecommunity.oss-cn-chengdu.aliyuncs.com/attach/2020-07/5a0e12020072418122613.png', //门店主图
					'https://inclusivecommunity.oss-cn-chengdu.aliyuncs.com/attach/2020-07/e47b1202007241818424266.png', //门店图片
					'https://inclusivecommunity.oss-cn-chengdu.aliyuncs.com/attach/2020-07/5e7af202007241817121636.png', //营业执照
					'https://inclusivecommunity.oss-cn-chengdu.aliyuncs.com/attach/2020-07/6006b202007241819486863.png', //特殊资质
				],
				markTipsModel: false,
				markText: [{
						title: '企业自营：',
						con: '企业自营在此平台主要指自己生产或在外委托加工的自有商品厂家或企业。其生成或加工的商品取得国家相应的合法资质，可以在市场 上进行流通交易的。 工厂或企业自己直接在 普惠 社区注册销售自有产品，自负盈亏的业务类型。企业自营类型的在国家普惠社区平台注册需按照平台的要求进行注册。'
					},
					{
						title: '社区直营：',
						con: '社区直营主要国家普惠社区平台为广大消费者自选自采的商品在普惠平台上进行 销售和 交易的活动，其商户的主体为国家普惠社区自身。'
					},
					{
						title: '线上商户：',
						con: '主要指在国家普惠社区平台上注册的网店商家，其通过国家普惠社区平台进行所代理的产品销售及其后续的产品售后客服。其产品销售过程全部在国家普惠社区平台上完成。'
					},
					{
						title: '线下商户：',
						con: '主要指实体店，即它们是属于本地的实体商户，门店和经营场所是在本地有固定 的 地方。其只是通过国家普惠社区 平台 做一些商家促销活动 或引流活动，消费者通过平台获取促销 活动优惠政策后再在实体商店内进行消费体验。'
					}
				],
				showType: 0,
				company_sign_ratio: "",
				community_ratio_limit: ""
			}
		},
		onLoad(option) {
			if (option.scene) {
				let options = utils.urlDecode(option)
				//#ifdef H5
				let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
				let QRCodeRout = "/" + routes[routes.length - 1].route //获取当前页面路由
				uni.setStorageSync("QRCodeRout", QRCodeRout)
				//#endif
				uni.setStorageSync("pid", options.uid)
				uni.setStorageSync("pos", options.uk)
				if (Number(options.uk) == 5) { //小助手
					this.data.promoter_uid = options.cid;
					this.data.is_promoter = 1;
				} else { //地推
					this.data.dealer_uid = options.cid;
					this.data.is_dealer = 1;
				}
				uni.navigateTo({
					url: `/pages/login/login`
				})
			} else if (option.uid && option.uk) {
				//#ifdef H5
				if (!uni.getStorageSync("back")) {
					let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
					let QRCodeRout = "/" + routes[routes.length - 1].route //获取当前页面路由
					uni.setStorageSync("QRCodeRout", QRCodeRout)
					uni.setStorageSync("cid", option.cid)
					uni.setStorageSync("pid", option.uid)
					uni.setStorageSync("pos", option.uk)
				}
				//#endif
				//#ifndef H5
				uni.setStorageSync("pid", option.uid)
				uni.setStorageSync("pos", option.uk)
				if (option.uk == 5) { //小助手
					this.data.promoter_uid = option.cid;
					this.data.is_promoter = 1;
				} else { //地推
					this.data.dealer_uid = option.cid;
					this.data.is_dealer = 1;
				}
				//#endif
				uni.navigateTo({
					url: `/pages/login/login`
				})
			}
			//#ifdef H5
			if (uni.getStorageSync("cid") && uni.getStorageSync("pos") && uni.getStorageSync("back")) {
				if (uni.getStorageSync("pos") == 5) { //小助手
					this.data.promoter_uid = uni.getStorageSync("cid");
					this.data.is_promoter = 1;
					uni.removeStorageSync("pos")
					uni.removeStorageSync("cid")
					uni.removeStorageSync("back")
				} else { //地推
					this.data.dealer_uid = uni.getStorageSync("cid");
					this.data.is_dealer = 1;
					uni.removeStorageSync("pos")
					uni.removeStorageSync("cid")
					uni.removeStorageSync("back")
				}
			}
			//#endif
			systemConfig({
				filed: 'company_sign_ratio'
			}).then(res => {
				this.company_sign_ratio = res.msg;
			})
			systemConfig({
				filed: 'community_ratio_limit'
			}).then(res => {
				this.community_ratio_limit = res.msg;
			})
			protocolDetail(28).then(res => {
				this.markTips12 = res.data.description
			})
			if (option.from == "fail") {
				sellerIndex().then(res => {
					let data = res.data.seller_info;
					if (data.seller_type == 2) {
						this.type2 = true
						this.type1 = false
					}
					if (data.shop_commission_retrun_mode == 2) {
						this.type4 = true
						this.type3 = false
					}
					this.data.online_logo = data.online_logo
					this.data.online_name = data.online_name
					this.data.online_phone = data.online_phone
					this.data.receive_name = data.receive_name
					this.data.receive_phone = data.receive_phone
					this.data.receive_address = data.receive_address
					this.data.is_new = 2
					this.data.seller_name = data.seller_name
					this.data.rebate_proportion = data.rebate_proportion
					this.data.cate_id = data.cate_id
					this.data.logo = data.logo
					this.urls[0] = data.logo
					this.data.phone = data.phone
					this.data.image = data.image
					this.urls[1] = data.image
					this.urls[2] = data.online_logo
					this.data.detail_image = JSON.parse(data.detail_image)
					this.data.quarantine_report = JSON.parse(data.quarantine_report)
					this.data.business_license = data.business_license
					this.data.unified_credit_code = data.unified_credit_code
					this.data.longitude = data.longitude
					this.data.latitude = data.latitude
					this.data.province = data.province_text
					this.data.city = data.city_text
					this.data.area = data.area_text
					this.data.dealer_uid = data.dealer_uid
					this.data.is_dealer = data.is_dealer
					this.data.is_promoter = data.is_promoter
					this.data.promoter_uid = data.promoter_uid
					this.data.seller_type = data.seller_type
					this.data.card_front = data.card_front
					this.data.card_back = data.card_back
					this.is_open_offline = data.is_open_offline ? true : false
					this.is_open_online = data.is_open_online ? true : false
					this.data.bank_card_number = data.bank_card_number
					this.data.cardholder_name = data.cardholder_name
					this.data.bank_name = data.bank_name
					this.data.bank_real_name = data.bank_real_name
					this.data.bank_type = data.bank_type
					if (data.bank_type == 2) {
						this.bankType1 = false
						this.bankType2 = true
					}
					if (data.latitude && data.longitude) {
						uni.request({
							header: {
								"Content-Type": "application/text"
							},
							url: 'https://apis.map.qq.com/ws/geocoder/v1/?location=' + data.latitude + ',' + data.longitude +
								'&key=7YDBZ-PZSWP-7UCDU-LMHBU-QSTXQ-W2FEO',
							success: (re) => {
								this.addressG.address1 = re.data.result.address;
								this.addressG.address2 = data.address.split(this.addressG.address1)[1]
							}
						})
					}
					if (data.business_hours) {
						let timeArr = data.business_hours.split('-');
						this.timeG.time1 = timeArr[0];
						this.timeG.time2 = timeArr[1];
					}

					getsellerclass().then(res => {
						res.data.seller_class.map((val, key) => {
							if (val.son) {
								val.son.map((val2, key2) => {
									if (val2.sc_id == this.data.cate_id) {
										this.catename = val2.sc_name;
										return
									}
								})
							} else {
								if (val.sc_id == this.data.cate_id) {
									this.catename = val.sc_name;
									return
								}
							}
						})
					})
				})
			}

			if (option.status == 2) {
				this.data.step = 5
				this.active = 4
			}
			this.baseUrl = baseUrl()
		},
		onShow() {
			let userInfo = uni.getStorageSync("userInfo")
			if (userInfo.phone) {
				this.data.personal_phone = userInfo.phone
				this.phoneCheck = true
			}
			if (userInfo.card_id && userInfo.real_name) {
				this.data.real_name = userInfo.real_name
				this.data.card_id = userInfo.card_id
				this.cardCheck = true
				this.nameCheck = true
			}
			let pages = getCurrentPages();
			let currPage = pages[pages.length - 1];
			if (currPage.selectBank) { //选择银行
				this.data.bank_name = currPage.bank_name;
				this.data.bank_real_name = currPage.bank_name;
			}
		},
		watch: {
			addressG: {
				deep: true,
				handler(val, oldval) {
					this.addressC();
				}
			},
			timeG: {
				deep: true,
				handler(val, oldval) {
					this.timeC();
				}
			}
		},
		methods: {
			onInput(e) {
				this.data.real_name = e.target.value
			},
			onInputId(e) {
				this.data.card_id = e.target.value
			},
			onBlur(e) {
				this.data.real_name = e.target.value
			},
			onBlurId(e) {
				this.data.card_id = e.target.value
			},
			// 选择银行名称
			selectBank() {
				uni.navigateTo({
					url: "/pages/center/accountSet/bank/selectBank"
				})
			},
			preViewExam(id) {
				uni.previewImage({
					urls: this.exampleImage,
					current: id,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {},
						fail: function(err) {}
					}
				});
			},
			myUpload(rsp) {
				this.$set(this.urls, rsp.index, rsp.path);
				let _this = this
				let token = uni.getStorageSync("Authori-zation");
				uni.showLoading({
					mask:true
				})
				uni.uploadFile({
					// 需要上传的地址
					url: _this.baseUrl + "/upload/image",
					header: {
						"Authori-zation": "Bearer " + token
					},
					// filePath  需要上传的文件
					filePath: rsp.path,
					name: "file",
					success(_res) {
						uni.hideLoading()
						var res = JSON.parse(_res.data);
						if (_res.statusCode === 200 && res.status === 200) {
							if (rsp.index == 0) {
								_this.data.logo = res.data.url
							} else if (rsp.index == 1) {
								_this.data.image = res.data.url
							} else if (rsp.index == 2) {
								_this.data.online_logo = res.data.url
							}
						} else {
							uni.showToast({
								icon: "none",
								title: "上传失败"
							});
						}
					}
				});
			},
			clk(index) {
				this.$refs.avatar.fChooseImg(index, {
					selWidth: "500upx",
					selHeight: "500upx",
					expWidth: '500upx',
					expHeight: '500upx',
					inner: index ? 'true' : 'false'
				});
			},
			ruleCheck() {
				this.ruleChecked = !this.ruleChecked
			},
			goRule(id, name) {
				uni.navigateTo({
					url: `/pages/center/help/rulesDetail?id=${id}&tit=${name}`
				})
			},
			markTips(type) {
				this.showType = type
				this.markTipsModel = !this.markTipsModel;
			},
			back() {
				uni.navigateBack({

				})
			},
			yzm() {
				let _self = this;
				uni.showLoading({
					mask:true
				})
				registerVerify({
					phone: _self.data.personal_phone
				}).then(res => {
					uni.hideLoading()
					uni.showToast({
						icon: "none",
						title: res.msg
					});
					_self.isCheck = false;
					_self.countdown();
				})
			},
			countdown() {
				let _self = this;
				if (_self.time == 0) {
					_self.isCheck = true;
					_self.time = 60;
				} else {
					_self.time--;
					setTimeout(_self.countdown, 1000);
				}
			},
			timeC() {
				this.data.business_hours = this.timeG.time1 + '-' + this.timeG.time2
			},
			addressC() {
				this.data.address = this.addressG.address1 + this.addressG.address2
			},
			cateId() {
				this.categoryShow = true
			},
			select(e) {
				let _this = this
				this.catename = e.name
				this.data.cate_id = e.id
				this.categoryShow = false
			},
			cateback(e) {
				this.categoryShow = e
			},
			storeLocation() {
				let _this = this
				// #ifdef MP-WEIXIN
				uni.authorize({
					scope: 'scope.userLocation',
					success() {
						uni.chooseLocation({
							success: function(res) {
								uni.request({
									header: {
										"Content-Type": "application/text"
									},
									url: 'https://apis.map.qq.com/ws/geocoder/v1/?location=' + res.latitude + ',' + res.longitude +
										'&key=7YDBZ-PZSWP-7UCDU-LMHBU-QSTXQ-W2FEO',
									success(re) {
										_this.addressG.address1 = re.data.result.address
										_this.data.province = re.data.result.address_component.province
										_this.data.city = re.data.result.address_component.city
										if (re.data.result.address_component.district) {
											_this.data.area = re.data.result.address_component.district
										} else {
											_this.data.area = re.data.result.address_component.street
										}

										_this.data.longitude = re.data.result.location.lng
										_this.data.latitude = re.data.result.location.lat
									}
								});
							}
						});
					},
					fail() {
						uni.showModal({
							content: "检测到您没打开此小程序的定位权限，是否去设置打开？",
							confirmColor: "#57BE6A",
							success: function(res) {
								if (res.confirm) {
									uni.openSetting({
										success: (res) => {}
									})
								} else if (res.cancel) {

								}
							}
						})
					}
				})
				// #endif
				// #ifdef APP-PLUS
				uni.chooseLocation({
					success: function(res) {
						uni.request({
							header: {
								"Content-Type": "application/text"
							},
							url: 'https://apis.map.qq.com/ws/geocoder/v1/?location=' + res.latitude + ',' + res.longitude +
								'&key=7YDBZ-PZSWP-7UCDU-LMHBU-QSTXQ-W2FEO',
							success(re) {
								_this.addressG.address1 = re.data.result.address
								_this.data.province = re.data.result.address_component.province
								_this.data.city = re.data.result.address_component.city
								if (re.data.result.address_component.district) {
									_this.data.area = re.data.result.address_component.district
								} else {
									_this.data.area = re.data.result.address_component.street
								}

								_this.data.longitude = re.data.result.location.lng
								_this.data.latitude = re.data.result.location.lat
							}
						});
					}
				});
				// #endif
				// #ifdef H5
				uni.chooseLocation({
					success: function(res) {
						location({
							address: "",
							latitude: res.latitude,
							longitude: res.longitude
						}).then(re => {
							_this.addressG.address1 = re.data.location.address
							_this.data.province = re.data.location.address_component.province
							_this.data.city = re.data.location.address_component.city
							if (re.data.location.address_component.district) {
								_this.data.area = re.data.location.address_component.district
							} else {
								_this.data.area = re.data.location.address_component.street
							}

							_this.data.longitude = re.data.location.location.lng
							_this.data.latitude = re.data.location.location.lat
						})
					}
				});
				// #endif

			},
			upload_img(type, ind) {
				let sourceType = ["album"];
				if ([4, 5].includes(type)) {
					sourceType = ["album", "camera"];
				}
				let _this = this;
				let token = uni.getStorageSync("Authori-zation");
				uni.chooseImage({
					count: 1,
					sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
					success: function(res) {
						uni.showLoading({
							mask:true,
							title: "上传中"
						})
						//因为有一张图片， 输出下标[0]， 直接输出地址
						var imgFiles = res.tempFilePaths[0];
						//#ifdef H5
						utils.imgCompress(imgFiles).then(re => {
							imgFiles = re
							//#endif
							uni.uploadFile({
								// 需要上传的地址
								url: _this.baseUrl + "/upload/image",
								header: {
									"Authori-zation": "Bearer " + token
								},
								// filePath  需要上传的文件
								filePath: imgFiles,
								name: "file",
								success(_res) {
									uni.hideLoading()
									var res = JSON.parse(_res.data);
									if (_res.statusCode === 200 && res.status === 200) {
										if (type == 1) {
											// _this.data.detail_image.splice(ind, 1, res.data.url)
											if (ind == undefined) {
												let length_index = _this.data.detail_image.length;
												_this.data.detail_image.splice(length_index, 1, res.data.url)

											} else {
												_this.data.detail_image.splice(ind, 1, res.data.url)
											}
										} else if (type == 2) {
											_this.data.business_license = res.data.url
										} else if (type == 3) {
											if (ind == undefined) {
												let length_index = _this.data.quarantine_report.length;
												_this.data.quarantine_report.splice(length_index, 1, res.data.url)

											} else {
												_this.data.quarantine_report.splice(ind, 1, res.data.url)
											}
										} else if (type == 4) {
											_this.data.card_front = res.data.url;
										} else if (type == 5) {
											_this.data.card_back = res.data.url;
										}

									} else {
										uni.showToast({
											icon: "none",
											title: "上传失败"
										});
									}
								}
							});
							//#ifdef H5
						})
						//#endif
					}
				});
			},
			sellerType() {
				this.$refs.popup.open()
			},
			radioChange1(evt) {
				this.data.seller_type = evt.target.value
			},
			radioChange2(evt) {
				this.data.bank_type = evt.target.value
			},
			radioChange3(evt) {
				this.data.shop_commission_retrun_mode = evt.target.value
			},
			checkChange(e) {
				let arr = e.detail.value;
				if (arr.indexOf('1') != -1) {
					this.is_open_offline = true;
				} else {
					this.community_ratio_limit = 1
					this.is_open_offline = false;
				}
				if (arr.indexOf('2') != -1) {
					this.is_open_online = true;
				} else {
					this.is_open_online = false;
				}
			},
			time1() {
				this.$refs.time1.show()
			},
			time2() {
				this.$refs.time2.show()
			},
			onConfirm1(e) {
				this.timeG.time1 = e.value
			},
			onConfirm2(e) {
				this.timeG.time2 = e.value
			},
			last() {
				this.data.step--
				this.active--
			},
			submit() {
				if (this.data.step == 1) {
					if (!this.addressG.address2) {
						uni.showModal({
							content: '请填写详细地址',
							showCancel: false,
							confirmColor: "#57BE6A"
						})
						return
					}
					if (!this.ruleChecked) {
						uni.showModal({
							content: '请阅读并同意《国家普惠社区商户入驻协议》',
							showCancel: false,
							confirmColor: "#57BE6A"
						})
						return
					}
					if (!this.is_open_offline && !this.is_open_online) {
						uni.showModal({
							content: '请选择至少一个渠道',
							showCancel: false,
							confirmColor: "#57BE6A"
						})
						return
					}
					if (this.is_open_offline) {
						if (!this.timeG.time1 || !this.timeG.time2) {
							uni.showModal({
								content: '请选择营业时间',
								showCancel: false,
								confirmColor: "#57BE6A"
							})
							return
						}
					}
					this.data.is_open_offline = this.is_open_offline ? 1 : 0;
					this.data.is_open_online = this.is_open_online ? 1 : 0;
					uni.showLoading({
						mask:true
					})
					this.merchantEntry(this.data)
				} else if (this.data.step == 2) {
					let data = {
						personal_phone: this.data.personal_phone,
						verify_code: this.data.verify_code,
						step: 2,
						is_new: this.data.is_new
					}
					uni.showLoading({
						mask:true
					})
					this.merchantEntry(data)
				} else if (this.data.step == 3) {
					let data = {
						real_name: this.data.real_name,
						card_id: this.data.card_id,
						step: 3,
						phone: uni.getStorageSync("userInfo").phone,
						card_front: this.data.card_front,
						card_back: this.data.card_back,
						is_new: this.data.is_new
					}
					uni.showLoading({
						mask:true
					})
					this.merchantEntry(data)
				} else if (this.data.step == 4) {
					uni.showLoading({
						mask:true
					})
					this.btnClick = false
					let _this = this
					if (_this.data.bank_card_number) {
						_this.data.bank_card_number = _this.data.bank_card_number.replace(/\s/g, "")
						_this.merchantEntry(_this.data)
						setTimeout(function() {
							_this.btnClick = true
						}, 1000)

					} else {
						uni.hideLoading()
						this.btnClick = true
						uni.showToast({
							icon: 'none',
							title: '请输入银行卡号'
						})
						setTimeout(function() {
							_this.btnClick = true
						}, 1000)
					}

				}
			},
			merchantEntry(data) {
				merchantEntry(data).then(res => {
					if (res.data) {
						uni.showModal({
							content: res.msg,
							showCancel: false,
							success() {
								uni.redirectTo({
									url: "/pages/index/index?current=0"
								})
							}
						})
						return
					}
					uni.hideLoading()
					this.data.step++
					this.active++
				})
			},
			finish() {
				uni.redirectTo({ //二维码扫码进入 back返回不出去
					url: `/pages/index/index?current=${4}`
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.container {
		font-size: 14px;
		line-height: 24px;

		.step {
			padding: 0 60rpx 50rpx;

			.status {
				padding: 50rpx 0 0;
				position: relative;

				.jifenGroup,
				.radioGroup {
					display: flex;
					justify-content: space-around;
					align-items: center;
				}

				.mtop-50 {
					margin-top: 50rpx;
				}

				.mark1,
				.mark {
					font-size: 28rpx;
					position: absolute;
					right: -6rpx;
					top: 20rpx;

					image {
						width: 40rpx;
						height: 40rpx;
					}
				}

				.mark1 {
					top: 220rpx;
				}
			}
		}

		.cut {
			width: 750rpx;
			height: 20rpx;
			background-color: #eee;
		}

		.step1,
		.step3 {
			padding: 0 60rpx;

			.uni-column {
				padding-top: 24rpx;
				position: relative;

				.title {
					font-size: 28rpx;
					line-height: 60rpx;
				}

				.bold {
					font-size: 32rpx;
					margin-bottom: 10rpx;
				}

				.cell-more {
					position: absolute;
					right: 10rpx;
					bottom: 5rpx;
					color: #e5e5e5;
				}

				.cell-more-per {
					position: absolute;
					right: 10rpx;
					top: 88rpx;
				}

				.label {
					// position: absolute;
					color: red;
					font-size: 20rpx;
					bottom: -50rpx;
				}

				.uni-input {
					height: 50rpx;
					line-height: 50rpx;
					border-bottom: 1rpx solid #f5f5f5;
				}

				.timeBox {
					display: flex;
					justify-content: space-between;

					.time {
						width: 250rpx;
					}

					text {
						color: #999;
					}
				}


				.image {
					background: url(../../../static/images/public/imgUpload.png) no-repeat center center;
					background-size: 90rpx 90rpx;
					border-radius: 10rpx;
					border: 1px solid rgba(238, 238, 238, 1);
				}

				.logo {
					width: 250rpx;
					height: 250rpx;
				}

				.headImg {
					width: 250rpx;
					height: 250rpx;
				}

				.detailImg {
					width: 630rpx;
					height: 300rpx;
				}

				.licenseImg {
					width: 630rpx;
					height: 300rpx;
				}

				.example-r {
					display: inline-block;
					text-align: center;
					width: 180rpx;
					height: 70rpx;
					line-height: 70rpx;
					background-color: #57be6a;
					border-radius: 18rpx;
					color: #fff;
					font-size: 24rpx;
					position: relative;
					bottom: 30rpx;
					left: 15rpx;
				}

				.example-b {
					background-color: #57be6a;
					border-radius: 18rpx;
					display: inline-block;
					text-align: center;
					width: 180rpx;
					height: 70rpx;
					line-height: 70rpx;
					color: #fff;
					font-size: 24rpx;
					display: block;
					margin: 25rpx 0;
				}

				.mark-img {
					width: 40rpx;
					height: 40rpx;
					position: relative;
					top: 10rpx;
					left: 20rpx;
				}

			}

		}
	}

	.step2 {
		padding: 0 60rpx;

		.name {
			height: 40rpx;
			margin-top: 90rpx;
			position: relative;

			text {
				position: absolute;
				top: -40rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(153, 153, 153, 1);
			}

			input {
				border-bottom: 1rpx solid rgba(220, 220, 220, 1);
				padding: 10rpx 0;
			}
		}

		.idcard {
			height: 40rpx;
			margin-top: 90rpx;
			position: relative;

			text:nth-of-type(1) {
				position: absolute;
				top: -40rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(153, 153, 153, 1);
			}

			input {
				border-bottom: 1rpx solid rgba(220, 220, 220, 1);
				padding: 10rpx 0;
				font-size: 30rpx;
			}

			.veri {
				position: absolute;
				right: 0rpx;
				top: 18rpx;
				font-size: 24rpx;
				font-weight: bold;
				color: $theme-color;
				z-index: 9;
			}

			.yzmactive {
				color: #999 !important;
			}

			.ver {
				text-align: right;
				font-size: 24rpx;
				color: #999999;
				position: absolute;
				right: 0;
				bottom: 40rpx;
			}
		}
	}

	.step3 {
		padding: 0 60rpx;

		.name {
			height: 50rpx;
			border-bottom: 1rpx solid rgba(220, 220, 220, 1);
			margin-top: 76rpx;
			padding: 14rpx;
			font-size: 30rpx;
			position: relative;

			text {
				position: absolute;
				top: -40rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(153, 153, 153, 1);
			}
		}

		.num {
			height: 50rpx;
			border-bottom: 1rpx solid rgba(220, 220, 220, 1);
			margin-top: 76rpx;
			padding: 14rpx;
			font-size: 30rpx;
			position: relative;

			text {
				position: absolute;
				top: -40rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(153, 153, 153, 1);
			}

			image {
				position: absolute;
				width: 44rpx;
				height: 44rpx;
				right: 0;
				top: 17rpx;
			}
		}
	}

	.step4 {
		padding: 0 60rpx;

		.cell {
			height: 50rpx;
			border-bottom: 1rpx solid rgba(220, 220, 220, 1);
			margin-top: 76rpx;
			padding: 14rpx;
			font-size: 30rpx;
			position: relative;

			text {
				position: absolute;
				top: -40rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(153, 153, 153, 1);
			}
		}
	}

	.step5 {
		padding: 0 60rpx;

		image {
			margin: 140rpx auto 36rpx;
			display: block;
			width: 150rpx;
			height: 150rpx;
			border-radius: 75rpx;
		}

		.a {
			font-size: 26rpx;
			color: rgba(51, 51, 51, 1);
			text-align: center;
		}

		.b {
			margin-top: 60rpx;
			text-align: center;
			font-size: 24rpx;
			color: rgba(153, 153, 153, 1);
		}
	}

	.meslist_canvas {
		position: fixed;
		top: 0;
		width: 200px;
		height: 200px;
		visibility: hidden;
	}

	.uni-btn-v {

		.rule {
			margin-top: 100rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			image {
				margin-right: 14rpx;
				width: 40rpx;
				height: 40rpx;
				border-radius: 20rpx;
			}

			.gray {
				margin-right: 14rpx;
				box-sizing: border-box;
				border: 2rpx #999 solid;
				width: 40rpx;
				height: 40rpx;
				border-radius: 20rpx;
			}

			.text {
				font-size: 24rpx;
				color: #333;

				text:nth-of-type(2) {
					color: $theme-color;
				}
			}
		}

		.btn {
			display: flex;
			justify-content: space-between;
			padding: 40rpx 60rpx;

			button {
				background-color: $theme-color;
				color: #fff;
				flex: 1;
				margin: 0 30rpx;
				height: 80rpx;
				border-radius: 40rpx;
				line-height: 80rpx;
				font-size: 32rpx;
				font-weight: bold;
			}

			button:nth-of-type(1) {
				background-color: #ccc;
			}
		}

	}

	.mark-tips-model {
		transition-property: opacity;
		transition-duration: 0.2s;
		position: fixed;
		top: 0;
		height: 100vh;
		width: 100%;
		z-index: 9;
		background: rgba(0, 0, 0, .8);

		.box-type {
			width: 90%;
			position: fixed;
			margin-left: 5%;
			height: 48vh;
			bottom: 23vh;

			.mark {
				font-size: 36rpx;
				text-align: center;
			}

			.mark-btn {
				position: fixed;
				z-index: 99;
				width: 84%;
				height: 77rpx;
				line-height: 77rpx;
				background: rgba(87, 190, 106, 1);
				box-shadow: 0 4rpx 20 0 rgba(87, 190, 106, .4);
				border-radius: 39rpx;
				text-align: center;
				font-size: 28rpx;
				font-weight: 300;
				color: #fff;
				bottom: 26vh;
				margin: 0 3%;
			}
		}

		.box {
			width: 90%;
			position: fixed;
			bottom: 5vh;
			height: 79vh;
			margin-left: 5%;

			.mark-btn {
				position: fixed;
				z-index: 99;
				width: 84%;
				height: 77rpx;
				line-height: 77rpx;
				background: rgba(87, 190, 106, 1);
				box-shadow: 0 4rpx 20 0 rgba(87, 190, 106, .4);
				border-radius: 39rpx;
				text-align: center;
				font-size: 28rpx;
				font-weight: 300;
				color: #fff;
				bottom: 9vh;
				margin: 0 3%;
			}
		}

		.bell {
			width: 183rpx;
			height: 183rpx;
			position: relative;
			z-index: 99;
			top: -45rpx;

		}

		.back {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}

		text {
			font-size: 60rpx;
			color: #FDFAF9;
			text-shadow: 0 4rpx 10rpx rgba(6, 88, 21, 0.3);
			padding: 60rpx 0;
			display: block;
			position: relative;
			z-index: 99;
			text-align: center;
		}

		.mark-con {
			text-align: center;
			position: relative;
			top: 1vh;
			color: #999;
			font-size: 26rpx;
			line-height: 50rpx;
			width: 90%;
			margin: 0 auto;
			background: #fff;
			border-radius: 20rpx;
			max-height: 74vh;
		}

		.mark {
			text-align: left;
			padding: 0 30rpx;
			max-height: 45vh;
			overflow-y: scroll;
			padding-bottom: 100rpx;
			box-sizing: border-box;
		}

		.title {
			font-weight: 600;
		}

		.explan {
			text-indent: 2em;
			margin-bottom: 10rpx;
		}

	}
</style>
